<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>保险智能分析系统</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="libs/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
<style>
	body,h3,p{margin: 0;padding: 0;font-family: '微软雅黑';}
	img{
		border: 0;
	}
	body{
		background-image: url('image/BG1.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;		
	}
	.top{
		width: 95%;
		height: 150px;
		background: url('image/logo.png') no-repeat right bottom/150px 58px;
	}
	.con{
		width: 100%;
		height: 300px;
	}
	.con .title{
		color: #f9752b; 
		font-size: 50px;
		font-weight: normal;
		font-family: '宋体';
		text-align: center;
	}
	.con .second_title{
		color: #f9752b;
		font-size: 36px;
		font-family: '宋体',"Helvetica Neue";
		text-align: center;
	}
	.part{
		width: 75%;
		height: 140px;
		margin: 50px auto  0;
	}
	.flexPart{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}
	.part .partCon{
	    width: 30%;
	    height: 100%;
	    border: 2px solid #fba26f;
	}
	.part .partCon a{
		display: block;
		width: 100%;
		height: 100%;
	    text-align: center;
	    line-height: 140px; 
	}
	.part .partCon img{
		width: 60%;
	}
	.part .part3 img{
		width: 65%;
	}
	.foot{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 120px;
	}
	.foot p{
		color: #9a9a9a;
		font-size: 26px;
		font-family: '宋体',"Helvetica Neue";
		width: 255px;
		height: 50px;
		line-height: 50px;
		margin: 0 auto;
		padding-left: 40px;
		background: url('image/location.png') no-repeat left center/24px 32px;
	}	
</style>
</head>
<body>
	<div class="top"></div>
    <div class="con" id="con">
    	<h3 class="title">保险智能分析系统</h3>
    	<p class="second_title">Insurance Robo-Advisor</p>
    	<div class="part">
    		<div class="flexPart">
	    		<div class="partCon part1">
	    			<a href="basic_infor.html">
	    				<img src="image/part1.png" alt="">
	    			</a>
	    		</div>
	    		<div class="partCon part2">
	    			<a href="product.html">
	    				<img src="image/part2.png" alt="">
	    			</a>
	    		</div>
	    		<div class="partCon part3">
	    			<a href="guest.html">
	    				<img src="image/part3.png" alt="">
	    			</a>
	    		</div>    			
    		</div>
    	</div>
    </div>
    <div class="foot">
    	<p>您所在城市: 广州</p>    		
    </div>
</body>
<script>
	$(function(){
		//居中
		var _height = $(window).height();
		var div_height = $("#con").outerHeight();
		var _top = (_height - div_height)/2-170;
		$("#con").css('marginTop',_top+'px');
	});
</script>
</html>